<script setup lang="ts">
import dayjs from 'dayjs'
import HumbleiconsPlay from '~icons/humbleicons/play'
import HumbleiconsDotsHorizontal from '~icons/humbleicons/dots-horizontal'
import CatImage from '@renderer/components/CatImage.vue'
import CatList from '@renderer/components/CatList.vue'
import CatListItem from '@renderer/components/CatListItem.vue'
import { formatSeconds, storageLocal } from '@renderer/tools/index'
import { usePlayerStore } from '@renderer/stores/player'
import { storeToRefs } from 'pinia'
import Favorite from '@renderer/components/Favorite.vue'

import type { TrackInfo, AlbumTrackData } from './type'

const { info, tracks } = storageLocal().getItem('track-album') as AlbumTrackData
const { playingData } = storeToRefs(usePlayerStore())
const { loadAudio, setPlayerList } = usePlayerStore()

async function doPlay(data: TrackInfo) {
  setPlayerList(tracks)

  const { bvid, cid } = data
  await loadAudio({ bvid, cid })
}

function doPlayFirst() {
  if (tracks.length) {
    doPlay(tracks[0])
  }
}
</script>

<template>
  <div v-if="info" class="list-info">
    <div class="cover">
      <CatImage :src="info.cover" :width="512" :height="512" />
    </div>
    <div class="info">
      <div class="title">{{ info.title }}</div>
      <div class="artist">Album by {{ info.author }}</div>
      <div class="date-and-count">
        最后更新于 {{ dayjs.unix(info.pubdate).format('YYYY年MM月DD日') }} ·
        {{ info.songcount }} 首歌
        <template v-if="info.duration"> · {{ Math.round(info.duration / 60) }} 分钟</template>
      </div>
      <div class="description" :title="info.description">{{ info.description }}</div>
      <div class="buttons">
        <button class="blue" @click="doPlayFirst">
          <HumbleiconsPlay class="svg-icon" />
          播放
        </button>
        <button class="grey">
          <HumbleiconsDotsHorizontal class="svg-icon" />
        </button>
      </div>
    </div>
  </div>
  <CatList :data-source="tracks" row-key="cid">
    <template #default="{ item }: { item: TrackInfo }">
      <CatListItem :selected="item.cid === playingData?.cid" @dblclick="doPlay(item)">
        <template #avatar>
          <CatImage :src="item.cover" :width="80" :height="80" />
        </template>
        <template #title>{{ item.title }}</template>
        <template #actions>
          <Favorite :data="item" />
        </template>
        <template #suffix>{{ formatSeconds(item.duration) }}</template>
      </CatListItem>
    </template>
  </CatList>
</template>

<style scoped lang="less">
.list-info {
  display: flex;
  margin-bottom: 72px;
  position: relative;
  .cover {
    @width: 288px;
    width: @width;
    height: @width;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 0.75em;
      border: 1px solid rgba(0, 0, 0, 0.04);
      &:not([src]) {
        display: none;
      }
    }
  }
  .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    overflow: auto;
    margin-left: 56px;
    .title {
      font-size: 36px;
      font-weight: 700;
      color: var(--color-text);
    }
    .artist {
      font-size: 18px;
      opacity: 0.88;
      color: var(--color-text);
      margin-top: 24px;
    }
    .date-and-count {
      font-size: 14px;
      opacity: 0.68;
      color: var(--color-text);
      margin-top: 2px;
    }
    .description {
      font-size: 14px;
      opacity: 0.68;
      color: var(--color-text);
      margin-top: 24px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      line-clamp: 3;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
    .buttons {
      margin-top: 32px;
      display: flex;
      button {
        border-radius: 8px;
        padding: 8px 16px;
        width: auto;
        margin: 0;
        margin-right: 16px;
        height: 40px;
        min-width: 40px;
        font-size: 18px;
        line-height: 18px;
        font-weight: 600;
      }
      .blue {
        background-color: var(--color-primary-bg);
        color: var(--color-primary);
        .svg-icon {
          margin: -6px;
          margin-right: 4px;
          @width: 26px;
          width: @width;
          height: @width;
          color: var(--color-primary);
        }
      }
      .grey {
        background-color: var(--color-secondary-bg);
        color: var(--color-text);
        opacity: 0.78;
        .svg-icon {
          margin: -6px;
        }
      }
    }
  }
}
</style>
